<template>
  <div class="stations" ref="wrapper">
    <div class="wrapper-contant">
      <div class="card-contant">
        <div class="name-contant">
          <div class="name">{{info.title}}</div>
          <Power :number="info.sign"></Power>
        </div>
        <div class="no-contant">
          <div class="no">NO.{{info.d_code}}</div>
          <div class="time">{{info.time}}</div>
        </div>
        <div class="address-contant">
          <div class="left">
            <div class="address">
              <i class="iconfont icon-dizhi"></i>
              {{info.address}}
            </div>
            <div class="distance">
              <i class="iconfont icon-juli"></i>
              {{info.distance}}KM
            </div>
          </div>
          <div class="right">
            <a class="item" :href="'tel:'+info.mobile">
              <img :src="phone" class="img">
              <div class="text">联系</div>
            </a>
            <div class="item" @click="jumpClick('/FeedBack')">
              <img :src="help" class="img">

              <div class="text">报错</div>
            </div>
          </div>
        </div>
      </div>
      <div class="space"></div>
      <div class="out-button">
        <div class="button-contant">
          <i class="iconfont icon-shoucangdedian collect"></i>
          <div class="text" @click="collect()">收藏地点</div>
          <i class="iconfont icon-fenxiang share"></i>
          <div class="text" @click="shareGuide()">分享电桩</div>
        </div>
      </div>
      <div class="charge-contant">
        <div class="title">
          自费说明
          <i class="iconfont icon-xiangxia1"></i>
        </div>
        <div class="des">本资费仅为移动支付费用,不代表现场刷卡资费</div>
        <div class="main-contant">
          <div class="row">
            <div class="type">按时收费</div>
            <div class="type-des">(充电过程中,充电器过载引起意外中断,插座被人拔出等情况,充电剩余金额不予返还)</div>
          </div>
          <div class="row">
            <div class="type">标准功率</div>
            <div class="type-des">(适用于{{info.maxpower}}瓦以下)</div>
          </div>
        </div>
      </div>
      <div class="charing-contant">
        <div class="charing-header">
          <div class="title">可用充电插头</div>
          <span class="one">闲</span>
          <span class="num">{{info.free_num}}</span>
          <span class="two">充</span>
          <span class="num">{{info.charging_num}}</span>
        </div>
        <div class="charing-box">
          <Charing
            class="charing-button"
            v-for="(item,index) in info.sockets"
            :key="index"
            :data="item"
          ></Charing>
        </div>
      </div>
      <div class="space1"></div>
    </div>
    <div class="nav-button-contant">
      <div class="button-item" @click="lead()">
        <i class="iconfont icon-daohang"></i>
        <div class="text">导航一下</div>
      </div>
      <div class="button-item" @click="scaleOpen()">
        <i class="iconfont icon-saoma"></i>
        <div class="text">扫码充电</div>
      </div>
    </div>
    <div class="cover-contant" v-show="shareShow" @click="hiddenShare()">
      <img :src="shareImg" alt>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import "index.less";
</style>

<script>
import { mapActions, mapState } from "vuex";
import Charing from "../../components/charing/index";
import Power from "../../components/power/index";
import BScroll from "better-scroll";
import wx from "weixin-js-sdk";
export default {
  name: "stations",
  data() {
    return {
      listScroll: {},
      info: {}, // 后台数据
      phoneShow: false,
      id: "",
      help: require("../../assets/help.png"),
      phone: require("../../assets/phone.png"),
      clickLock: false,
      shareShow: false,
      shareImg: require("../../assets/share.png")
    };
  },
  created() {
    console.log(this.$route.query.devID);
    this.id = this.$route.query.devID;
    this.change(false);
    const that = this;
    // 获取详情数据
    this.getDetail(this.id);
    this.initShare(); // 设置分享配置
    // wx.getLocation({
    //   type: "wgs84", // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
    //   success: function(res) {
    //     console.log(res);
    //     var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
    //     var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
    //     that.getDetail(latitude, longitude);
    //   }
    // });
  },
  mounted() {
    // 滑块初始
    this.initScroll();
  },
  methods: {
    ...mapActions("Home", ["change"]),
    ...mapActions("Machine", ["setMachine"]),
    ...mapActions("PayType", ["setInNowType"]),
    // 跳转组件
    jumpClick(path) {
      if (this.clickLock) {
        this.$dialog.toast({
          mes: "加载失败",
          timeout: 1500,
          icon: "error"
        });
        return;
      }
      this.$router.push({
        path: path
      });
    },
    // 滑动组件
    initScroll() {
      this.listScroll = new BScroll(this.$refs.wrapper, {
        click: true
      });
    },
    // 获取充电桩详情
    getDetail(lng, lat) {
      const that = this;
      that.$dialog.loading.open("正在加载");
      that.$http
        .get("/device/Chargeinfo", {
          params: {
            id: this.id,
            lng: this.loactionInfo.longitude,
            lat: this.loactionInfo.latitude
          }
        })
        .then(res => {
          // that.clickLock = false;
          that.info = res.data.data;
          // 存储一份在vuex
          that.setInNowType(that.info);
          that.$dialog.loading.close();
        });
    },
    // 收藏充电桩
    collect() {
      this.$dialog.loading.open("正在加载");
      this.$http
        .post("/device/Collect", {
          id: this.id
        })
        .then(res => {
          console.log(res);
          if (res.data.errno == 0) {
            this.$dialog.toast({
              mes: "收藏成功",
              timeout: 1500,
              icon: "success"
            });
          } else {
            this.$dialog.toast({
              mes: "收藏失败",
              timeout: 1500,
              icon: "error"
            });
          }
          this.$dialog.loading.close();
        });
    },
    // 扫二维码
    scaleOpen() {
      wx.scanQRCode({
        needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
        success: function(res) {
        }
      });
    },
    // 地理位置导航
    lead() {
      const that = this;
      wx.openLocation({
        latitude: that.info.lat, // 纬度，浮点数，范围为90 ~ -90
        longitude: that.info.lng, // 经度，浮点数，范围为180 ~ -180。
        name: that.info.title, // 位置名
        address: that.info.address, // 地址详情说明
        scale: 14 // 地图缩放级别,整形值,范围从1~28。默认为最大
        // infoUrl: "" // 在查看位置界面底部显示的超链接,可点击跳转
      });
    },
    initShare() {
      this.$http.get("/config", {}).then(res => {
        const result = res.data.data;
        console.log(result);
        wx.updateAppMessageShareData({
          title: result.share_title, // 分享标题
          desc: result.share_decs, // 分享描述
          link: result.share_url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: result.share_img, // 分享图标
          success: function() {
            // 设置成功
            console.log(12345967);
          }
        });
      });
    },
    shareGuide() {
      this.shareShow = true;
    },
    hiddenShare() {
      this.shareShow = false;
    }
  },
  components: {
    Charing,
    Power
  },
  computed: {
    ...mapState({
      loactionInfo: state => state.Setting.loactionInfo
    })
  }
};
</script>
